/** DES: 点击样式相关Item定义*/
import React, {Component} from 'react';
import {
    Alert,
    StyleSheet,
    Text,
    TouchableHighlight,
    TouchableNativeFeedback,
    TouchableOpacity, TouchableWithoutFeedback,
    View,
} from 'react-native';

export default class TestTouchableComponent extends Component {

    _onPressButton() {
        Alert.alert('You tapped the button!');
    }

    _onLongPressButton() {
        Alert.alert('You long-pressed the button!');
    }

    render() {
        return (
            // View默认是Vertical的LinearLayout
            <View style={styles.container}>
                {/* 点击高亮组件，假若需要实现可点击的TextView，估计也需要这样去包裹 */}
                <TouchableHighlight onPress={this._onPressButton} underlayColor={'#ffffff'}>
                    {/* 使用View再包裹Text */}
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableHighLight</Text>
                    </View>
                </TouchableHighlight>
                {/* 点击透明度按钮，会对背景色进行透明度调整 */}
                <TouchableOpacity onPress={this._onPressButton}>
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableOpacity</Text>
                    </View>
                </TouchableOpacity>
                {/* 点击涟漪状组件，只有在Android平台上生效，估计就没啥用了... */}
                <TouchableNativeFeedback onPress={this._onPressButton}
                                         background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableNativeFeedback</Text>
                    </View>
                </TouchableNativeFeedback>
                {/* 点击后无响应的组件 */}
                <TouchableWithoutFeedback onPress={this._onPressButton}>
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableWithoutFeedback</Text>
                    </View>
                </TouchableWithoutFeedback>
                {/* 长按事件 */}
                <TouchableHighlight onLongPress={this._onLongPressButton}>
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableHighlight-->LongPress</Text>
                    </View>
                </TouchableHighlight>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        paddingTop: 60,
        alignItems: 'center',
    },
    button: {
        marginBottom: 30,
        width: 260,
        alignItems: 'center',
        backgroundColor: '#2196F3',
    },
    buttonText: {
        textAlign: 'center',
        padding: 20,
        color: '#ffffff',
    },
});
